<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>::Panel de Recargas::</title>
<link href="<c:url value="/resources/css/gestionRecargas.css" />" rel="stylesheet" type="text/css" />
<script src="<c:url value="/resources/js/util.js" />" type="text/javascript"></script>
<!--[if lte IE 7]>
<script src="<c:url value="/resources/js/json2.js" />" type="text/javascript"></script>
<![endif]-->
<script src="<c:url value="/resources/js/gestionRecargas.js" />" type="text/javascript"></script>
</head>
<body>
<div id="divCabeceraEstaciones">
<table border="0" cellspacing="0" class="tablaEstaciones tablaConsulta">
		<caption>
		 	<div class="tituloTabla">Recarga de Estaciones</div>
			<div style="clear:both"></div>
			<form:form id="formFiltroRecargas" action="gestionRecargas.php" method="post" onsubmit="return false;">
				<div class="rangos-fecha">
					<label class="etiqueta">Desde : </label>
					<input type="text" id="fechaInicio" name="fechaInicio" value="<c:out value="${fechaInicio}"/>" />
					<label class="etiqueta">Hasta :</label>
					<input type="text" id="fechaFin" name="fechaFin" value="<c:out value="${fechaFin}" />"/>
					<input type="hidden" name="modoRecarga" id="modoRecarga" value="0" />
					<a class="btn" href="javascript:fnProcesarRecargaDeEstaciones();">Recargar</a>
				</div>
			</form:form>
		</caption>
		<thead>
			<tr>
				<th class="cabecera-tabla" align="center" width="30">
					<input type='checkbox' name='chkMarcarTodos' onclick="fnMarcarEstaciones();"></input>
				</th>
				<th class="cabecera-tabla" align="center" width="50">Cod.</th>
				<th class="cabecera-tabla" width="200">Estaci&oacute;n</th>
				<th class="cabecera-tabla" align="center" width="80">Tipo Venta</th>
				<th class="cabecera-tabla" width="150" align="center">IP</th>
				<th class="cabecera-tabla" width="70" align="center">Puerto</th>
				<th class="cabecera-tabla" width="120" align="center">Fec. Inicio Oper.</th>	
				<th class="cabecera-tabla" width="80" align="center">Resultados Recarga</th>
			</tr>
		</thead>
		<tbody>
			<tr><td colspan="8"></td></tr>
		</tbody>
</table>
</div>
<div id="divTblEstaciones">
<table id="tblEstaciones" border = "0" cellspacing="0" class="tablaEstaciones tablaConsulta">
		<thead>
			<tr>
				<th class="cabecera-tabla" align="center" width="30" height="0"></th>
				<th class="cabecera-tabla" align="center" width="50"></th>
				<th class="cabecera-tabla" width="200"></th>
				<th class="cabecera-tabla" align="center" width="80"></th>
				<th class="cabecera-tabla" width="150" align="center"></th>
				<th class="cabecera-tabla" width="70" align="center"></th>
				<th class="cabecera-tabla" width="120" align="center"></th>	
				<th class="cabecera-tabla" width="80" align="center"></th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${listaEstaciones}" var="estacion" varStatus="status">
			<c:if test="${status.index%2==0}">
			  <c:set var="estiloFila" value="fila-tabla-par" />
			</c:if>
			<c:if test="${status.index%2!=0}">
			  <c:set var="estiloFila" value="fila-tabla-impar" />
			</c:if>
			<tr class="<c:out value="${estiloFila}" />">
				<td class="celda" align="center">
					<c:if test="${estacion.habilitado==0}">
						<input type='checkbox' class="checkEstacion" name='checkEstacion' disabled="disabled"></input>	    
					</c:if>
					<c:if test="${estacion.habilitado==1}">
						<input type='checkbox' class="checkEstacion" name='checkEstacion'></input>	    
					</c:if>
				</td>
				<td class="celda" align="center">
					<div class="datosEstacion" 
						data-idEstacion="<c:out value="${estacion.idEstacion}" />"
						data-codEstacion="${estacion.codEstacion}"
						data-nombreEstacion="${estacion.nombreEstacion}"
						data-flagEstacionHabilitada="<c:out value="${estacion.habilitado}" />">
						<c:out value="${estacion.codEstacion}" />
					</div>
				</td>
				<td class="celda" align="center">
					<c:out value="${estacion.nombreEstacion}" />	    		    
				</td>
				<td class="celda" align="center">
					<c:if test="${estacion.tipoVenta==0}">
						<div class="celdaGlp"><c:out value="GLP" /></div>   		    
					</c:if>
					<c:if test="${estacion.tipoVenta==1}">
						<div class="celdaGnv"><c:out value="GNV" /></div>		    
					</c:if>
					<c:if test="${estacion.tipoVenta==2}">
						<c:out value="GLP / GNV" />	    		    
					</c:if>
				</td>
				<td class="celda" align="center">
					<c:out value="${estacion.ip}" />					    		    
				</td>
				<td class="celda" align="center">
					<c:out value="${estacion.puerto}" />					    		    
				</td>
				<td class="celda" align="center">
					<c:out value="${estacion.fecIniOper}" />					    		    
				</td>
				<td class="estado celda" align="center">
					<div style="display:none" class="resultadosRecarga" ></div>
					<img style="display:none" class="gifCargando" width="20" height="20" src="<c:url value="/resources/img/gif-cargando.gif" />" border="0" />
					<a style="display:none" class="btnVerRecarga" onclick="fnVerResultadosRecarga(this);" href="#">Ver</a>
				</td>	
			</tr>
		</c:forEach>
		<c:if test="${empty listaEstaciones}">
		    <tr id="filaVacia" class="fila-tabla-impar"><td class="celda" colspan="8" align="center">NO HAY ESTACIONES REGISTRADAS</td></tr>
		</c:if>
	</tbody>
</table>
</div>

<div id="dlgResultadosRecarga" style="display:none" align="center">
	<div id="divResultadosRecarga" class="etiqueta" style="width:438px;height:220px;overflow:auto;">
		<table id="tblResultadosRecarga" border="0" width="420">
			<tbody>
				<tr id="filaVaciaResultadosRecarga">
					<td colspan="3"></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td width="20"></td>
					<td width="75"></td>
					<td width="325"></td>
				</tr>
			</tfoot>
		</table>
	</div>
</div>
</body>
</html>